<html>

<style>
    * {
        margin: 0;
    }
</style>

<script type="importmap">
	{
	  "imports": {
		"three": "../../three.js-r151/build/three.module.js",
		"three/addons/": "../../three.js-r151/examples/jsm/"
	  }
	}
</script>

<body>
    <div id="canvas"></div>

    <script type="module">
        import * as THREE from 'three';
        import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

        // 1. 创建三大件
        // 1.1 三维场景Scene, 类似创建了个世界，三维世界
        const scene = new THREE.Scene();
        const geometry = new THREE.BoxGeometry(1, 1, 1);
        const material = new THREE.MeshBasicMaterial({
            color: 0x00ffff, //设置材质颜色
            transparent: true,//开启透明
            opacity: 0.5,//设置透明度
        });

        // a. 体验一列模型
        // for (let i = 0; i < 10; i++) {
        //     const mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
        //     // 沿着x轴分布
        //     mesh.position.set((i - 5) * 1.3, 0, 0);
        //     scene.add(mesh); //网格模型添加到场景中
        // }

        // b. 体验二列模型
        for (let i = 0; i < 10; i++) {
            for (let j = 0; j < 10; j++) {
                const mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
                // 在XOZ平面上分布
                mesh.position.set((i-5) * 1.3, 0, (j-5) * 1.3);
                scene.add(mesh); //网格模型添加到场景中  
            }
        }

        // 添加辅助坐标系
        const axesHelper = new THREE.AxesHelper(10);
        scene.add(axesHelper);

        // 1.2 相机
        const camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 50);
        camera.position.set(8, 13, 8)

        // 1.3 渲染器
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        let canvasDom = document.getElementById("canvas");
        canvasDom.appendChild(renderer.domElement);

        // 设置相机控件轨道控制器OrbitControls
        const controls = new OrbitControls(camera, canvasDom);
        // 如果OrbitControls改变了相机参数，重新调用渲染器渲染三维场景
        controls.addEventListener('change', function () {
            renderer.render(scene, camera); //执行渲染操作
        });//监听鼠标、键盘事件


        renderer.render(scene, camera);
    </script>
</body>

</html>